<template>
  <div>
    <el-breadcrumb separator="/" class="submenu">
      <el-breadcrumb-item class="submenu-left" :to="{ path: '/Index' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-right-r">
      <div class="clearfix main-mid">
        <ul class="fl main-mid-ul">
          <li class="fl" @click="isShow">
            <i class="iconfont iconfont-font">&#xe6de;</i>
            <p class="main-mid-ul-span">
              <span>{{messages.length}}</span>&nbsp;&nbsp;个</p>
            <p>待办处理</p>
          </li>
          <li class="fl" @click="isShowMid">
            <i class="iconfont iconfont-font">&#xe726;</i>
            <p class="main-mid-ul-span">
              <span>{{number1}}</span>&nbsp;&nbsp;个</p>
            <p>预警信息未读</p>
          </li>
          <li class="fl" @click="isShowRight">
            <i class="iconfont iconfont-font">&#xe705;</i>
            <p class="main-mid-ul-span">
              <span>{{number2}}</span>&nbsp;&nbsp;个</p>
            <p>邮件未读</p>
          </li>
          <li class="fl">
            <i class="iconfont iconfont-font">&#xe621;</i>
            <p class="main-mid-ul-span">
              <span>{{number3}}</span>&nbsp;&nbsp;个</p>
            <p>当月批次合格率</p>
          </li>
          <li class="fl">
            <i class="iconfont iconfont-font">&#xe61e;</i>
            <p class="main-mid-ul-span">
              <span>{{number4}}</span>&nbsp;&nbsp;个
            </p>
            <p>综合交货及时率</p>
          </li>
          <li class="fl">
            <i class="iconfont iconfont-font">&#xe620;</i>
            <p class="main-mid-ul-span">
              <span>{{number5}}</span>&nbsp;&nbsp;个</p>
            <p>当前8D未结案总数量</p>
          </li>
        </ul>
        <div class="popup" v-if="isHide">
          <div class="popup-d">
            <i class="iconfont iconfont-fonts" v-html="iconfonts">{{iconfonts}}</i>
            <p class="popup-p">
              <span>{{messages.length}}</span>&nbsp;&nbsp;个
            </p>
            <i @click="close" title="关闭" class="el-icon-circle-close-outline icon-f"></i>
          </div>
          <ul class="popup-u">
            <li v-for="message in messages" :key="message.id">
              <router-link :to="{'path':message.url,'query':message.queryParams}">
                你有
                <span class="popup-color">{{message.count}}个</span>{{message.title}}
              </router-link>
            </li>
          </ul>
        </div>
        <div class="fr main-mid-bot">
          <div class="clearfix inform-hd">
            <h3 class="fl">通知公告</h3>
            <a class="fr" href="javascript:;">更多</a>
          </div>
          <ul class="notice">
            <li v-for="item in items" :key="item.id">{{item.msg}}</li>
          </ul>
        </div>
      </div>
      <div class="clearfix main-mid">
        <ul class="fl main-mid-u">
          <li class="fl">
            <div class="clearfix inform-hd">
              <h3 class="fl">货源风险</h3>
            </div>
            <div class="inform-hd-risk">
              <delivery></delivery>
            </div>
          </li>
          <li class="fr">
            <div class="clearfix inform-hd">
              <h3 class="fl">交货及时率</h3>
            </div>
            <div class="inform-hd-risk">
              <risk></risk>
            </div>
          </li>
        </ul>
        <div class="fr main-mid-bote">
          <div class="clearfix inform-hd">
            <h3 class="fl">常用附件下载</h3>
            <a class="fr" href="javascript:;">更多</a>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane class="ppp" label="公共附件">
              <ul class="notice">
                <li v-for="item in items" :key="item.id">{{item.msg}}</li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="集团附件">
              <ul class="notice">
                <li v-for="item in role" :key="item.id">{{item.msg}}</li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="echart">
        <div class="clearfix inform-hd">
          <h3 class="fl">批次合格率</h3>
        </div>
        <div class="echart-risk">
          <qualification></qualification>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Risk from '@/components/echart/risk.vue'
  import Delivery from '@/components/echart/delivery.vue'
  import Qualification from '@/components/echart/qualification.vue'
  export default {
    components: {
      Risk,
      Delivery,
      Qualification

    },
    created() {
      this.axios.post(this.lib.config.host.system + '/system/task/todo/query').then((response) => {
        this.messages = response.data;
      });
    },
    data() {
      return {
        activeName: 'first',
        isHide: false,
        number: 28,
        iconfonts: '',
        number1: 18,
        number2: 10,
        number3: 5,
        number4: 0,
        number5: 0,
        messages: [],
        items: [{
            msg: '我是一条公告1'
          },
          {
            msg: '我是一条公告2'
          },
          {
            msg: '我是一条公告3'
          },
          {
            msg: '我是一条公告4'
          },
          {
            msg: '我是一条公告5'
          }
        ],
        role: [{
            msg: '我是一条公告11'
          },
          {
            msg: '我是一条公告22'
          },
          {
            msg: '我是一条公告33'
          },
          {
            msg: '我是一条公告44'
          },
          {
            msg: '我是一条公告5'
          }
        ]
      }
    },
    methods: {
      isShow() {
        this.iconfonts = '&#xe6de';
        this.number4 = 26;
        this.isHide = true;
      },
      close() {
        this.isHide = false;
      },
      isShowMid() {
        this.iconfonts = '&#xe726';
        this.number4 = 6;
        this.isHide = true
      },
      isShowRight() {
        this.iconfonts = '&#xe705';
        this.number4 = 11;
        this.isHide = true
      }
    }
  }

</script>
<style scoped>
  .el-tab-pane {
    height: 244px;
  }

  .el-tabs--border-card {
    box-shadow: none;
    border: none
  }

  .el-tabs--border-card>.el-tabs__header {
    background: #DA1F24;
  }

</style>
